<template>
	<view>
    <!-- 用户列表选项 -->
    <scroll-view class='scbg' scroll-y='true'>
      <view class="parent_catainer">
        <!-- 头部 -->
        <view class="container_head">
          <img class="head_img" src="../../static/background/横向.png"/>
          <view class="head_pers_info" @click="head_pers_info" v-if="memberDetail.id">
            <view class="head_pic">
              <img class="head_pic_content" mode="aspectFit" :src="memberDetail.avatar_url"/>
            </view>
            <view class="inf_content">
              <text class="user_info">Hello~{{ memberDetail.nickname }}</text>
              <text class="family_info_ct_phone">ID：{{ memberDetail.id }}</text>
              <text class="family_info_ct">设备编号：{{ memberDetail.device_id }}</text>
            </view>
          </view>
          <view class="head_pers_info" @click="toLogin" v-else>
            <view class="inf_content" style="margin-left: 50px">
              <text class="user_info">登录/注册</text>
            </view>

          </view>
        </view>

        <view class="userItemListView">
          <view class="my_priview_md" @click="myappointpage">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>我的设备</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="openmyorder">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>使用记录</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="openNews">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>消息公告</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="myfriend">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>在线咨询</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="mycollection">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>投诉or建议</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="mycollection2">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>意见记录</text>
            <view class="arrow"></view>
          </view>
        </view>

        <view class="userItemListView">
          <view class="my_priview_md" @click="head_pers_info">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>个人资料</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="updatepassword">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>修改密码</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="aboutus" hidden="true">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>关于我们</text>
            <view class="arrow"></view>
          </view>
          <view class="my_priview_md" @click="logout">
            <img class="my_priview" src="../../static/home_active.png"/>
            <text>退出登录</text>
            <view class="arrow"></view>
          </view>
        </view>
      </view>
    </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        memberDetail: {

        }
			}
		},
    onShow() {
      this.$api.memberDetail(uni.getStorageSync('memberId')).then(res => {
        this.memberDetail = res
        if (res.avatar_url) {
          this.memberDetail.avatar_url = this.$baseUrl + res.avatar_url
        }
      })
    },
		methods: {
      logout() {
        wx.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          success: function (res) {
            if (res.confirm) {
              wx.clearStorage();
              wx.redirectTo({
                url: '/pages/user/login'
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      toLogin() {
        uni.redirectTo({
          url: '/pages/user/login'
        })
      },
      head_pers_info() {
        uni.navigateTo({
          url: '/pages/my/myinfo'
        })
      },
      myappointpage() {
        uni.navigateTo({
          url: '/pages/my/myappointpage'
        })
      },
      openmyorder() {
        uni.navigateTo({
          url: '/pages/my/myorder'
        })
      },
      updatepassword() {
        uni.navigateTo({
          url: '/pages/my/updatepassword'
        })
      },
      myfriend() {
        uni.navigateTo({
          url: '/pages/my/service'
        })
      },
      mycollection() {
        uni.navigateTo({
          url: '/pages/consult/consult'
        })
      },
      mycollection2() {
        uni.navigateTo({
          url: '/pages/consult/list'
        })
      },
      openNews() {
        uni.navigateTo({
          url: '/pages/news/news'
        })
      },
      aboutus() {
        uni.navigateTo({
          url: '/pages/my/about'
        })
      }

		}
	}
</script>

<style lang="scss">

/* 头部背景图片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
  height: 200rpx;
  width: 100%;
  margin-bottom: 50rpx;
  justify-content: left;
  display: flex;
  align-items: center;
  flex-direction: row;
  position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
  color: #ffffff;
  padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #eeeeee;
  padding: 0 0rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
  align-items: center;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999999;
  border-right: 4rpx solid #999999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

.userItemListView text{
  font-size: 30rpx;
}

.last_view{
  background:#3b8ae6;
  width: 100%;
  height:1200rpx;
}

</style>
